<template>
  <div :style='mystyle' class='like-container'>
    <div class='like-btn'>
      <div class='like-wrapper'>
        <div class='like-ripple'></div>
        <svg class='like-heart' width='24' height='24' viewBox='0 0 24 24'>
          <path
            d='M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z'></path>
        </svg>
        <div class='like-particle' style='--line-count: 6'>
          <div v-for='v in 6' :key='v' class='like-particle-item' :style='`--line-index: ${v}`'></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Like',
  props: {
    mystyle: {
      type: String
    }
  },
  destroyed() {
    if (this.timer) {
      clearTimeout(this.timer)
    }
  },
  methods: {

    getElement() {
      const likeBtn = document.getElementsByClassName('like-btn')[0]
      const likeHeart = document.getElementsByClassName('like-heart')[0]
      const likeRipple = document.getElementsByClassName('like-ripple')[0]
      const likeContainer = document.getElementsByClassName('like-container')[0]
      const likeParticleItems = document.getElementsByClassName('like-particle-item')
      const path = document.getElementsByTagName('path')[0]
      return {
        likeBtn,
        likeHeart,
        likeRipple,
        likeContainer,
        likeParticleItems,
        path
      }
    },

    addAnimation() {
      const {
        likeBtn,
        likeHeart,
        likeRipple,
        likeContainer,
        likeParticleItems,
        path
      } = this.getElement()

      likeContainer.style.display = 'block'

      // 填充
      likeBtn.style.fill = '#f66'
      path.style.fill = '#f66'

      // 四周发散
      likeParticleItems.forEach(item => {
        item.classList.add('like-particle-item-a')
      })
      likeBtn.classList.add('like-btn-a')

      // 跳动
      likeHeart.classList.add('like-heart-n')
      likeBtn.classList.add('like-btn-n')

      // 闪一下
      likeRipple.classList.add('like-ripple-b')
      likeBtn.classList.add('like-btn-b')

      // 渐显
      likeBtn.classList.add('like-btn-c')

      // 填充好后渐隐
      const timer = setTimeout(() => {
        likeContainer.classList.add('scale-out-center')
        clearTimeout(timer)
      }, 500)
    },

    removeAnimation() {
      const {
        likeBtn,
        likeHeart,
        likeRipple,
        likeContainer,
        likeParticleItems,
        path
      } = this.getElement()
      likeContainer.style.display = 'none'

      // 填充
      likeBtn.style.fill = 'transparent'
      path.style.fill = 'transparent'

      likeParticleItems.forEach(item => {
        item.classList.remove('like-particle-item-a')
      })
      likeBtn.classList.remove('like-btn-a')
      likeHeart.classList.remove('like-heart-n')
      likeBtn.classList.remove('like-btn-n')
      likeRipple.classList.remove('like-ripple-b')
      likeBtn.classList.remove('like-btn-b')
      likeBtn.classList.remove('like-btn-c')
      likeContainer.classList.remove('scale-out-center')
    },

    setHidden() {
      this.addAnimation()
      const timer = setTimeout(() => {
        this.removeAnimation()
        clearTimeout(timer)
      }, 800)
    }
  }
}
</script>

<style lang='scss' scoped>
$heart-color: #f66;
$easing: cubic-bezier(.7, 0, .3, 1);
$duration: 300ms;

.like-container {
  display: none;
}

.like-btn {
  position: relative;
  z-index: 1;
  border: none;
  border-radius: 100%;
  //width: 1em;
  //height: 1em;
  appearance: none;
  cursor: pointer;
  font-size: 250px;
  transition: all $duration $easing;
}

.like-btn::before {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  //box-shadow: 0 .3em .6em rgba(#000, .3);
  content: "";
  transition: inherit;
}

.like-btn::after {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  background-color: transparent;
  content: "";
}

.like-btn::before {
  animation: depress-shadow $duration $easing both;
}

.like-ripple::before {
  position: absolute;
  left: 0;
  top: 0;
  border: .4em solid $heart-color;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  content: "";
  transform: scale(0);
}

//
//.like-btn:focus::after {
//  animation: depress $duration $easing both;
//}
//
.like-btn-c {
  animation: depress-shadow $duration $easing both;
}

.like-btn-b .like-ripple-b::before {
  animation: ripple-out $duration $easing;
}

//.like-btn:focus path {
//  fill: $heart-color;
//}

.like-btn-n .like-heart-n {
  animation: heart-bounce $duration $easing;
}

.like-btn-a .like-particle-item-a {
  animation: particle-out calc(#{$duration} * 1.2) $easing forwards;
}

//
//.like-btn:focus {
//  cursor: normal;
//  pointer-events: none;
//}

.like-wrapper {
  display: grid;
  justify-content: center;
  align-items: center;

  > * {
    grid-area: 1/1;
    margin: auto;
  }
}

.like-ripple {
  overflow: hidden;
  position: relative;
  border-radius: 100%;
  width: 1em;
  height: 1em;
}

.like-heart {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: center 80%;

  path {
    transition: all $duration $easing;
    stroke: $heart-color;
    stroke-width: 2;
    fill: transparent;
  }
}

.like-particle {
  position: relative;
  width: 1px;
  height: 1px;
}

.like-particle-item {
  --Θ: calc(var(--line-index) / var(--line-count) * 1turn);
  $color-list: #f66 #66f #f90 #09f #9c3 #3c9;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: .05em;
  width: .1em;
  height: .1em;
  transform: translate(-50%, -50%) rotate(var(--Θ)) translateY(0) scaleY(0);
  transition: all $duration $easing;
  @each $v in $color-list {
    $index: index($color-list, $v);
    &:nth-child(#{$index}) {
      background-color: $v;
    }
  }
}

@keyframes depress {
  0%,
  100% {
    transform: none;
  }
  50% {
    transform: translateY(5%) scale(.9);
  }
}

@keyframes depress-shadow {
  0%,
  100% {
    transform: none;
  }
  50% {
    transform: scale(.5);
  }
}

// 控制跳动
@keyframes heart-bounce {
  0%,
  80%,
  100% {
    transform: scale(1);
  }
  40% {
    transform: scale(.7);
  }
}

// 控制四周喷射
@keyframes particle-out {
  50% {
    height: .3em;
  }
  50%,
  60% {
    height: .3em;
    transform: translate(-50%, -50%) rotate(var(--Θ)) translateY(.8em) scale(1);
  }
  60% {
    height: .2em;
  }
  100% {
    transform: translate(-50%, -50%) rotate(var(--Θ)) translateY(1em) scale(0);
  }
}

// 控制过度闪一下
@keyframes ripple-out {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(5);
  }
}

.scale-out-center {
  -webkit-animation: scale-out-center 0.3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation: scale-out-center 0.3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

// 渐隐
@-webkit-keyframes scale-out-center {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
}

@keyframes scale-out-center {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
}

</style>
